<template>
  <router-view>
  </router-view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';

export default defineComponent({
  name: 'Home',
  setup() {
    const data = ref(1)
    function add() {
      data.value++
    }
    const user = reactive({
      code: 200,
      msg: "123",
      data: {
        name: "123",
        children: {
          name: "test"
        }
      }
    })
    function change() {
      console.log(user)
      user.data.children.name = "hello"
    }
    return {
      data,
      add,
      user,
      change
    }
  }
});
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* text-align: center; */
  color: #2c3e50;
  height: 100%;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}

html,
body,
#app {
  height: 100%;
  font: 14px/1.5 'Helvetica Neue', Helvetica, Arial, 'Microsoft Yahei', 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>
